import { allElFormItemsOptions, loadComOptions, getFormItemsOptions } from "@/utils/loadComOptions";
import { useAuthStore } from "@/stores/modules/auth";
const getElCom = new allElFormItemsOptions(),
  getElComOption = new loadComOptions(),
  isNo = ["是", "否"].map((item, i) => ({ dict: "isNo", label: item, value: `${!i}` })),
  handleTreeData = (data: Array<Menu.MenuOptions>) => {
    return data.map(item => {
      item.label = item.meta.title;
      if (item.children) handleTreeData(item.children);
      return item;
    });
  };

export const routerName = getElCom.getInput(
    {
      span: 12
    },
    {
      required: true,
      prop: "name",
      label: "路由名称",
      slotContent: "路由的name值"
    }
  ),
  defaultColum = (): Array<elComAttrAndFunType[]> => [
    [
      getElCom.getTreeSelect(
        {
          span: 24,
          clearable: false,
          data: [
            {
              label: "根节点",
              path: "parent",
              children: handleTreeData(useAuthStore().showMenuListGet)
            }
          ],
          props: {
            value: "path",
            label: "label",
            children: "children"
          },
          placeholder: "请选择上级菜单"
        },
        {
          required: true,
          prop: "parent",
          label: "上级菜单"
        }
      )
    ],
    [
      getElCom.getRadioGroup(
        {
          span: 24,
          dict: "menuType",
          isInter: ["目录", "菜单"].map(item => ({
            dict: "menuType",
            label: item,
            value: item
          }))
        },
        {
          prop: "menuType",
          label: "菜单类型"
        }
      )
    ],
    [
      {
        formItem: getFormItemsOptions({
          prop: "meta.icon",
          label: "菜单图标",
          required: true
        }),
        slot: "IconSelector",
        span: 24
      }
    ],
    [
      getElCom.getInput(
        {
          span: 12,
          placeholder: "请输入菜单名称"
        },
        {
          required: true,
          prop: "meta.title",
          label: "菜单名称"
        }
      ),
      getElCom.getInput(
        {
          span: 12,
          placeholder: "请输入菜单排序",
          type: "number"
        },
        {
          required: true,
          prop: "meta.sort",
          label: "菜单排序"
        }
      )
    ],
    [
      routerName,
      getElCom.getInput(
        {
          span: 12,
          placeholder: "请输入路由重定向"
        },
        {
          required: true,
          prop: "redirect",
          label: "重定向",
          slotContent: "点击目录时，默认打开的页面"
        }
      )
    ],
    [
      getElCom.getRadioGroup(
        {
          span: 12,
          dict: "isNo",
          isInter: isNo
        },
        {
          prop: "meta.isFull",
          label: "是否全屏",
          slotContent: "选择是则路由将全屏显示，不带侧边栏和顶栏"
        }
      ),
      getElCom.getInput(
        {
          span: 12
        },
        {
          required: true,
          prop: "path",
          label: "路由地址",
          slotContent: "访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
        }
      )
    ],
    [
      getElCom.getRadioGroup(
        {
          span: 12,
          dict: "isNo",
          isInter: isNo
        },
        {
          prop: "meta.isHide",
          label: "是否隐藏",
          slotContent: "选择是隐藏则路由地址将不会出现在侧栏，但仍然可以访问"
        }
      ),
      getElCom.getRadioGroup(
        {
          span: 12,
          dict: "menuStatus",
          isInter: ["正常", "停用"].map((item, i) => ({
            dict: "menuStatus",
            label: item,
            value: `${!i}`
          }))
        },
        {
          prop: "meta.status",
          label: "菜单状态",
          slotContent: "选择停用则路由将不会出现在侧边栏，也不能被访问"
        }
      )
    ]
  ],
  permission = getElCom.getInput(
    {
      span: 12
    },
    {
      prop: "meta.permission",
      label: "权限标识"
    }
  ),
  component = getElCom.getInput(
    {
      span: 12,
      placeholder: "请输入组件路径"
    },
    {
      required: true,
      prop: "component",
      label: "组件路径",
      slotContent: "组件路径，如：`/babylon-example/casual-game/index`，默认在views目录下"
    }
  ),
  keepAlive = getElCom.getRadioGroup(
    {
      span: 12,
      dict: "isNo",
      isInter: isNo
    },
    {
      prop: "meta.isKeepAlive",
      label: "是否缓存",
      slotContent: "选择是则会被`keep-alive`缓存"
    }
  );
export default {
  form: getElComOption.getFormOptions({
    labelWidth: "100px"
  }),
  rules: (form: EmptyObjectType) =>
    getElComOption.createFormRules({
      parent: {
        rule: ["change", "请选择上级菜单"]
      },
      path: {
        rule: ["blur", "请输入路由地址"]
      },
      "meta.icon": {
        rule: ["change", "请选择图标"]
      },
      "meta.title": {
        rule: ["blur", "请输入菜单名称"]
      },
      name: {
        rule: ["blur", "请输入路由名称"]
      },
      "meta.sort": {
        rule: ["blur", "请输入菜单排序"]
      },
      redirect: {
        rule: ["blur", "请输入路由重定向"]
      },
      "meta.isFull": {
        rule: ["change", "请选择是否全屏"]
      },
      "meta.isHide": {
        rule: ["change", "请选择是否隐藏"]
      },
      component: {
        rule: ["blur", "请输入组件路径"]
      },
      "meta.status": {
        rule: [
          "change",
          undefined,
          undefined,
          (rule: any, value: any, callback: any) => {
            console.log(value);
            if (value === null || value === undefined) {
              callback(new Error("请选择菜单状态"));
            } else {
              callback();
            }
          }
        ]
      }
    }),
  countInter: getElComOption.countInter(defaultColum()),
  dicts: getElComOption.countDict(defaultColum()),
  columns: defaultColum()
} as FyhComOptions;
